/**
 * 响应式布局基础设置
 */

/* 移动端基础样式 (默认移动优先) */
:root {
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  
  --spacing-xs: 0.25rem;      /* 4px */
  --spacing-sm: 0.5rem;       /* 8px */
  --spacing-md: 1rem;         /* 16px */
  --spacing-lg: 1.5rem;       /* 24px */
  --spacing-xl: 2rem;         /* 32px */
  
  --container-padding: 1rem;  /* 16px */
  --card-border-radius: 0.75rem; /* 12px */
}

/* 平板布局 */
@media (min-width: 640px) {
  :root {
    --container-padding: 1.5rem;  /* 24px */
  }
  
  .app-container {
    max-width: 640px;
    margin: 0 auto;
  }
  
  .card {
    margin-bottom: 1.5rem !important;
  }
}

/* 大屏幕平板/小型桌面 */
@media (min-width: 768px) {
  :root {
    --font-size-base: 1.0625rem; /* 17px */
    --font-size-lg: 1.25rem;     /* 20px */
    --container-padding: 2rem;   /* 32px */
  }
  
  .app-container {
    max-width: 768px;
  }
  
  .phone-mockup {
    width: 375px;
    margin: 0 auto;
    border: 10px solid #333;
    border-radius: 40px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  }
}

/* 桌面布局 */
@media (min-width: 1024px) {
  .app-container {
    max-width: 1024px;
  }
}

/* 通用响应式工具类 */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--spacing-md);
}

.responsive-flex-wrap {
  display: flex;
  flex-wrap: wrap;
}

/* 全局响应式图片 */
img.responsive {
  max-width: 100%;
  height: auto;
}

/* 在桌面设备上模拟手机展示 */
@media (min-width: 1024px) {
  body {
    background-color: #f5f5f5;
    padding: 2rem 0;
  }
  
  .app-wrapper {
    position: relative;
    width: 100%;
    max-width: 414px; /* iPhone Plus 尺寸 */
    margin: 0 auto;
    background: white;
    border-radius: 2rem;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    overflow: hidden;
    height: 85vh;
    max-height: 800px;
  }
  
  .content-scroll {
    height: 100%;
    overflow-y: auto;
  }
}

/* 修复各种常见响应式问题 */
.overflow-x-auto {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.overflow-x-auto::-webkit-scrollbar {
  display: none;
}

input, button, select, textarea {
  font-size: 16px; /* 防止iOS自动缩放表单 */
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 确保底部导航条在移动设备上固定显示 */
.bottom-nav-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: white;
} 